/**
 * 工厂页型体工时效率表格组件
 */
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useBrandStore } from '@/stores/factory'
import { Search } from '@element-plus/icons-vue'
import http from '@/axios/http'

const route = useRoute()
const factory = ref(route.query.factory)

const brandStore = useBrandStore()

const date = ref([new Date(Date.now() - 1000 * 60 * 60 * 24 * 7), new Date()])
const brand = ref([])
const model = ref('')

const tableData = ref([])
const isLoading = ref(false)

async function search() {
  isLoading.value = true

  await http.post("/factory/getEfficiency", {
    factory: factory.value,
    startTime: date.value[0].getFullYear() + "-" + (date.value[0].getMonth() < 9 ? ("0" + (date.value[0].getMonth() + 1)) : (date.value[0].getMonth() + 1)) + "-" + (date.value[0].getDate() < 9 ? ("0" + date.value[0].getDate()) : date.value[0].getDate()),
    endTime: date.value[1].getFullYear() + "-" + (date.value[1].getMonth() < 9 ? ("0" + (date.value[1].getMonth() + 1)) : (date.value[1].getMonth() + 1)) + "-" + (date.value[1].getDate() < 9 ? ("0" + date.value[1].getDate()) : date.value[1].getDate()),
    brand: brand.value,
    model: model.value
  }).then(res => {
    tableData.value = res.data
    if (tableData.value.length === 100) {
      // eslint-disable-next-line no-undef
      ElMessage({
        message: '表格中最多只能显示 100 条数据！',
        type: 'warning',
        duration: 5000
      })
    }
  }).catch(err => {
    console.log(err)
  })

  isLoading.value = false
}

onMounted(() => {
  search()
})
</script>

<template>
  <div id="factory-efficiency-table">
    <div class="efficiency-table-top">
      <div class="efficiency-table-top-item">
        <span>日期：</span>

        <el-date-picker
          v-model="date"
          type="daterange"
          range-separator="-"
          :teleported="false"
          :clearable="false"
          style="width: 200px;"
        ></el-date-picker>
      </div>

      <div class="efficiency-table-top-item">
        <span>品牌：</span>

        <el-select
          v-model="brand"
          multiple
          collapse-tags
          collapse-tags-tooltip
          clearable
          filterable
          :teleported="false"
          no-data-text="暂无数据"
          no-match-text="暂无该品牌"
          placeholder="请选择品牌"
          style="width: 155px;"
        >
          <el-option
            v-for="item in brandStore.getData()"
            :key="item.brand_no"
            :label="item.brand_no"
            :value="item.brand_no"
          ></el-option>
        </el-select>
      </div>

      <div class="efficiency-table-top-item">
        <span>型体：</span>

        <el-input
          v-model="model"
          clearable
          placeholder="请输入型体编号"
          style="width: 130px;"
        ></el-input>
      </div>

      <div @click="search" class="efficiency-table-top-item">
        <el-icon class="efficiency-table-search">
          <Search/>
        </el-icon>
      </div>
    </div>

    <div class="efficiency-table-bottom">
      <el-table
        :data="tableData"
        v-loading="isLoading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        empty-text="暂无数据"
        max-height="56vh"
        border
      >
        <el-table-column label="品牌" width="60" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.brand_no !== null ? scope.row.brand_no : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="型体" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.model_no !== null ? scope.row.model_no : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="日期" width="90" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.ym !== null ? scope.row.ym : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="加工1" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.rate11 !== null ? scope.row.rate11 + '%' : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="加工2" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.rate12 !== null ? scope.row.rate12 + '%' : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="裁断" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.rate2 !== null ? scope.row.rate2 + '%' : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="鞋面" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.rate3 !== null ? scope.row.rate3 + '%' : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="半成品" width="70" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.rate4 !== null ? scope.row.rate4 + '%' : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="成型" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.rate5 !== null ? scope.row.rate5 + '%' : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="合计" width="65" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.rate6 !== null ? scope.row.rate6 + '%' : '-' }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#factory-efficiency-table {
  width: 100%;
  height: 100%;
  overflow: auto;

  --el-bg-color: #333;
  --el-text-color-secondary: white;

  .el-table {
    --el-table-bg-color: rgba(0, 0, 0, 0.2);
    --el-table-border-color: rgba(100, 100, 100, 0.5);
    --el-table-row-hover-bg-color: rgba(100, 100, 100, 0.5);
    --el-table-tr-bg-color: rgba(0, 0, 0, 0.2);
    --el-table-text-color: white;
  }

  &:deep(.el-table__empty-block) {
    background-color: rgba(0, 0, 0, 0.2);
  }
  
  .efficiency-table-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 2%;
    color: white;
    font-weight: normal;

    --el-color-primary: green;

    &:deep(.el-input__wrapper) {
      background-color: black;
    }

    &:deep(.el-range__icon), &:deep(.el-range-input), &:deep(.el-select__input), &:deep(.el-input__inner) {
      color: #ccc;
    }

    &:deep(.el-date-range-picker) {
      --el-color-primary: green;
      --el-datepicker-text-color: white;
      --el-datepicker-off-text-color: #999;
      --el-datepicker-header-text-color: white;
      --el-datepicker-icon-color: white;
      --el-datepicker-border-color: white;
      --el-datepicker-inner-border-color: white;
      --el-datepicker-inrange-bg-color: #666;
      --el-datepicker-inrange-hover-bg-color: #666;
      --el-datepicker-active-color: green;
      --el-datepicker-hover-text-color: green;
    }

    &:deep(.el-picker-panel) {
      color: white;
      background: black;
    }

    &:deep(.el-select__popper.el-popper) {
      background-color: black;
    }

    &:deep(.el-select-dropdown__item) {
      color: white;
      background-color: black;
    }

    &:deep(.el-select-dropdown__item.selected) {
      color: white;
      background-color: green;
    }

    &:deep(.el-select-dropdown__item.hover) {
      color: white;
      background-color: #666;
    }

    &:deep(.el-tag--info) {
      --el-tag-text-color: white;
      --el-tag-bg-color: #666;

      color: white;
      background-color: #666;
    }

    &:deep(.el-popper) {
      background-color: black;
    }

    .efficiency-table-top-item {
      display: flex;
      justify-content: center;
      align-items: center;

      .efficiency-table-search {
        color: #ddd;
        font-size: 3vh;
        font-weight: normal;
        cursor: pointer;
        transition: all 0.2s ease-out;

        &:hover {
          color: white;
        }
      }
    }
  }

  .efficiency-table-bottom {
    padding: 0 2%;
    position: relative;
    z-index: 0;
  }
}
</style>